<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
  <div class="app-container calendar-list-container no-padding">
    <el-row>
      <div class="xf-tabletop-handles" style="margin-top: 10px;padding-bottom:5px">
        <div class="xf-tabhd-left">
          <el-radio-group v-model="radioType" @change="switchTable" size="mini">
            <el-radio-button label="inspect">巡检记录</el-radio-button>
            <el-radio-button label="loss">漏检记录</el-radio-button>
          </el-radio-group>
          <el-button class="inspection-export-xsl" v-if="radioType==='inspect'&&list.length>0" @click="downloadIns" type="text" size="mini">导出表格</el-button>
          <el-button class="inspection-export-xsl" v-if="radioType==='loss'&&list.length>0" @click="downloadLos" type="text" size="mini">导出表格</el-button>
        </div>
        <div class="xf-tabhd-right">
          <div class="inspection-btns-changecontent" v-show="radioType==='inspect'">
            <span style="font-size: 14px;">巡检结果</span>
            <el-select v-model="listQuery.inspectionResult" filterable placeholder="请选择" size="mini">
              <el-option label="全部" value="-1"></el-option>
              <el-option label="正常" value="0"></el-option>
              <el-option label="异常" value="1"></el-option>
            </el-select>
            <el-button class="filter-item" type="primary" @click="handleFilter" size="mini">查询</el-button>
            <el-popover placement="bottom-end" width="700" class="xf-custom-poper" @show="getSelected('0')" v-model="visible2">
              <div class="xf-double-form">
                <div class="xf-dbform-item">
                  <div class="xf-dbform-item__sleft">
                    <p class="xf-dbform-item__label">设施编号</p>
                    <el-input v-model="slistQuery.facilitiesNo" placeholder="请输入设施编号"></el-input>
                  </div>
                  <div class="xf-dbform-item__sright">
                    <p class="xf-dbform-item__label">设施类型</p>
                    <el-select v-model="slistQuery.equipmentType" filterable placeholder="请选择设施类型" style="width: 100%;">
                      <el-option v-for="(item,index) in selectTypeList" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                  </div>
                </div>
                <div class="xf-dbform-item">
                  <div class="xf-dbform-item__sleft">
                    <p class="xf-dbform-item__label">位置描述</p>
                    <el-input v-model="slistQuery.positionDescription" placeholder="请输入位置描述"></el-input>
                  </div>
                  <div class="xf-dbform-item__sright">
                    <p class="xf-dbform-item__label">巡检人</p>
                    <el-input v-model="slistQuery.inspectionPerson" placeholder="请输入巡检人"></el-input>
                  </div>
                </div>
                <div class="xf-dbform-item">
                  <div class="xf-dbform-item__sleft">
                    <p class="xf-dbform-item__label">联系电话</p>
                    <el-input v-model="slistQuery.mobilePhone" placeholder="请输入联系电话"></el-input>
                  </div>
                  <div class="xf-dbform-item__sright">
                    <p class="xf-dbform-item__label">巡检时间</p>
                    <el-date-picker
                      style="width: 320px"
                      v-model="slistQuery.inspectionDateStr"
                      type="daterange"
                      :picker-options="pickerOptions"
                      value-format="yyyy-MM-dd"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                      >
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <div style="text-align: left; margin: 0; margin-top:20px;">
                <el-button size="mini" type="primary" @click="pointerQuery">查询</el-button>
                <el-button size="mini"  type="text" @click="visible2 = false">取消</el-button>
              </div>
              <el-button slot="reference" type="text" size="mini">高级查询</el-button>
            </el-popover>
          </div>
          <div class="inspection-btns-changecontent" v-show="radioType==='loss'">
            <span style="font-size: 14px;">设施编号</span>
            <el-input v-model="loslistQuery.facilitiesNo" clearable placeholder="请输入设施编号" class="xf-query-input" size="mini"></el-input>
            <el-button class="filter-item" type="primary" @click="loshandleFilter" size="mini">查询</el-button>
            <el-popover placement="bottom-end" width="700" class="xf-custom-poper" @show="getSelected('1')" v-model="visible3">
              <div class="xf-double-form">
                <div class="xf-dbform-item">
                  <div class="xf-dbform-item__sleft">
                    <p class="xf-dbform-item__label">设施类型</p>
                    <el-select v-model="losslistQuery.equipmentType" filterable placeholder="请选择设施类型" style="width: 100%;">
                      <el-option v-for="(item,index) in selectTypeList" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                  </div>
                  <div class="xf-dbform-item__sright">
                    <p class="xf-dbform-item__label">位置描述</p>
                    <el-input v-model="losslistQuery.positionDescription" placeholder="请输入位置描述"></el-input>
                  </div>
                </div>
                <div class="xf-dbform-item">
                  <div class="xf-dbform-item__sleft">
                    <p class="xf-dbform-item__label">计划完成时间</p>
                    <el-date-picker
                      style="width: 320px"
                      v-model="losslistQuery.plannedCompletionTimeStr"
                      type="daterange"
                      :picker-options="pickerOptions"
                      value-format="yyyy-MM-dd"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                      >
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <div style="text-align: left; margin: 0; margin-top:20px;">
                <el-button size="mini" type="primary" @click="lospointerQuery">查询</el-button>
                <el-button size="mini" @click="visible3 = false" type="text">取消</el-button>
              </div>
              <el-button slot="reference" size="mini" type="text">高级查询</el-button>
            </el-popover>
          </div>
        </div>
      </div>
    </el-row>
    <el-table
      key='tableKey'
      :data="list"
      v-loading="listLoading" fit style="width: 100%" v-if="radioType==='inspect'">
      <el-table-column label="巡检结果">
        <template slot-scope="scope">
          <span :style="{color:scope.row.color}">{{scope.row.inspectionResult}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态变更">
        <template slot-scope="scope">
          <span>{{scope.row.equipmentStatus}}</span>
        </template>
      </el-table-column>
      <el-table-column label="设施编号">
        <template slot-scope="scope">
          <span>{{scope.row.facilitiesNo}}</span>
        </template>
      </el-table-column>
      <el-table-column label="设施类型">
        <template slot-scope="scope">
          <span>{{scope.row.equipmentType}}</span>
        </template>
      </el-table-column>
      <el-table-column label="位置描述">
        <template slot-scope="scope">
          <span>{{scope.row.positionDescription}}</span>
        </template>
      </el-table-column>
      <el-table-column label="巡检人">
        <template slot-scope="scope">
          <span>{{scope.row.inspectionPerson}}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系电话">
        <template slot-scope="scope">
          <span>{{scope.row.mobilePhone}}</span>
        </template>
      </el-table-column>
      <el-table-column label="巡检时间">
        <template slot-scope="scope">
          <span>{{scope.row.inspectionDate}}</span>
        </template>
      </el-table-column>
      <el-table-column label="计划完成时间">
        <template slot-scope="scope">
          <span>{{scope.row.plannedCompletionTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130" fixed="right">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="viewDetail(scope.row)">
            查看明细
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      key='tableKey'
      :data="list"
      v-loading="listLoading" fit style="width: 100%" v-if="radioType==='loss'">
      <el-table-column label="设施编号">
        <template slot-scope="scope">
          <span>{{scope.row.facilitiesNo}}</span>
        </template>
      </el-table-column>
      <el-table-column label="设施类型">
        <template slot-scope="scope">
          <span>{{scope.row.equipmentType}}</span>
        </template>
      </el-table-column>
      <el-table-column label="位置描述">
        <template slot-scope="scope">
          <span>{{scope.row.positionDescription}}</span>
        </template>
      </el-table-column>
      <el-table-column label="计划完成时间">
        <template slot-scope="scope">
          <span>{{scope.row.plannedCompletionTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="漏检原因">
        <template slot-scope="scope">
          <span>{{scope.row.problemDescription}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="sensor-pagination-container" v-if="radioType==='inspect'">
      <div></div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,15,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
    <div v-show="!listLoading" class="sensor-pagination-container" v-if="radioType==='loss'">
      <div></div>
      <el-pagination @size-change="loshandleSizeChange" @current-change="loshandleCurrentChange" :current-page.sync="loslistQuery.page" :page-sizes="[10,15,30, 50]" :page-size="loslistQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="lostotal"> </el-pagination>
    </div>
    <!--室内路线选取-->
    <insideDetail :Show.sync="insideDetailShow" :id.sync="recordId"></insideDetail>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import {
    outerpage,
    exportRecord,
    Outerpageloss,
    outerLinkwith
  } from "@/api/device/inspectionRecord/index";

  import insideDetail from './outerTagDetail';

  import {
    selectCountByBuild,
  } from "@/api/device/exceptionRecord/index";

  export default {
    name: "outerTag",
    components:{insideDetail},
    data(){
      return {
        radioType:'inspect',
        tableKey:'0',
        selectTypeList:[],
        insideDetailShow:false,
        recordId:'',
        visible2:false,
        visible3:false,
        buildList:[],
        listQuery:{
          page: 1,
          limit: 15,
          inspectionResult:'-1',
        },
        loslistQuery:{
          page: 1,
          limit: 15,
          facilitiesNo:'',
        },
        list:[],
        slistQuery:{
          facilitiesNo:'',
          equipmentType:'全部',
          positionDescription:'',
          inspectionPerson:'',
          mobilePhone:'',
          inspectionDateStr:''
        },
        losslistQuery:{
          equipmentType:'全部',
          positionDescription:'',
          plannedCompletionTimeStr:''
        },
        total: null,
        lostotal:null,
        listLoading: false,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
        params:{
          channelId:"",
        },
      }
    },
    created(){
      this.params.channelId=this.$route.params.id;
      this.getList()
    },
    methods:{
      fileDownload(data, fileName){
        let blob = new Blob([data], {
          type: "application/octet-stream"
        });
        let filename = fileName || "filename.xls";
        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(blob, filename);
        } else {
          var blobURL = window.URL.createObjectURL(blob);
          var tempLink = document.createElement("a");
          tempLink.style.display = "none";
          tempLink.href = blobURL;
          tempLink.setAttribute("download", filename);
          if (typeof tempLink.download === "undefined") {
            tempLink.setAttribute("target", "_blank");
          }
          document.body.appendChild(tempLink);
          tempLink.click();
          document.body.removeChild(tempLink);
          window.URL.revokeObjectURL(blobURL);
        }
      },
      downloadIns(){
        //  下载
        let parmas = Object.assign(
          JSON.parse(JSON.stringify(this.listQuery)),
          JSON.parse(JSON.stringify(this.slistQuery)),{inspectionDateStr:JSON.parse(JSON.stringify(String(this.slistQuery.inspectionDateStr)))}
        );
        let self = this;
        request({
          method: 'post',
          url: '/api/device/deviceOutdoorRecordInspectionResults/export',
          data: parmas,
          responseType: 'blob'
        }).then(res => {
          let filename = "室外巡检记录.xlsx";
          self.fileDownload(res, filename);
        }).catch((error) => {

        })
      },
      downloadLos(){
        //  下载
        let parmas = Object.assign(
          JSON.parse(JSON.stringify(this.loslistQuery)),
          JSON.parse(JSON.stringify(this.losslistQuery)),{plannedCompletionTimeStr:JSON.parse(JSON.stringify(String(this.losslistQuery.plannedCompletionTimeStr)))}
        );
        let self = this;
        request({
          method: 'post',
          url: '/api/device/deviceOutdoorRecordInspectionResults/exportLeak',
          data: parmas,
          responseType: 'blob'
        }).then(res => {
          let filename = "室外漏检记录.xlsx";
          self.fileDownload(res, filename);
        }).catch((error) => {

        })
      },
      switchTable(){
        //  切换请求
        // 切换按钮时重置分页查询条件
        this.listQuery.page = 1;
        this.listQuery.limit = 15;
        this.loslistQuery.page = 1;
        this.loslistQuery.limit = 15;
        this.restQuery();
        this.lossRestQ();
        if (this.radioType === "inspect") {
          this.tableKey = "0";
          this.loslistQuery.facilitiesNo = '';
          this.getList();
        } else {
          this.tableKey = "1";
          this.listQuery.inspectionResult = '-1';
          this.getlossList();
        }
      },
      getSelected(flag){
        // 显示建筑列表
        selectCountByBuild().then(res=>{
          this.buildList = res.data.bname;
        });
        // 显示联想搜索
        outerLinkwith({leakFlag:flag}).then(res=>{
          if (res.status===200){
            this.selectTypeList = res.data.type;
          }
        })
      },
      lossRestQ(){
        this.losslistQuery.equipmentType = '全部';
        this.losslistQuery.positionDescription = '';
        this.losslistQuery.plannedCompletionTimeStr = '';
      },
      restQuery(){
        this.slistQuery.facilitiesNo = '';
        this.slistQuery.equipmentType = '全部';
        this.slistQuery.positionDescription = '';
        this.slistQuery.inspectionPerson = '';
        this.slistQuery.mobilePhone = '';
        this.slistQuery.inspectionDateStr = '';
      },
      handleFilter(){
        //重置高级查询条件
        this.restQuery();
        this.getList();
      },
      loshandleFilter(){
        this.lossRestQ();
        this.getlossList();
      },
      pointerQuery(){
        // 高级查询
        this.visible2 = false;
        this.listLoading = true;
        // 取消绑定并合并查询条件
        let contactKeys = Object.assign(
          JSON.parse(JSON.stringify(this.listQuery)),
          JSON.parse(JSON.stringify(this.slistQuery)),{inspectionDateStr:JSON.parse(JSON.stringify(String(this.slistQuery.inspectionDateStr)))}
        );
        outerpage(contactKeys).then(res => {
          this.list = res.data.rows;
          this.total = res.data.total;
          this.listLoading = false;
        });
      },
      lospointerQuery(){
        // 高级查询
        this.visible3 = false;
        this.listLoading = true;
        // 取消绑定并合并查询条件
        let contactKeys = Object.assign(
          JSON.parse(JSON.stringify(this.loslistQuery)),
          JSON.parse(JSON.stringify(this.losslistQuery)),{plannedCompletionTimeStr:JSON.parse(JSON.stringify(String(this.losslistQuery.plannedCompletionTimeStr)))}
        );
        Outerpageloss(contactKeys).then(res => {
          this.list = res.data.rows;
          this.lostotal = res.data.total;
          this.listLoading = false;
        });
      },
      viewDetail(row){
        this.insideDetailShow = true;
        this.recordId = String(row.id);
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      loshandleSizeChange(val) {
        this.loslistQuery.limit = val;
        this.getlossList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      loshandleCurrentChange(val) {
        this.loslistQuery.page = val;
        this.getlossList();
      },
      getList() {
        this.listLoading = true;
        let parmas = Object.assign(
          JSON.parse(JSON.stringify(this.listQuery)),
          JSON.parse(JSON.stringify(this.slistQuery)),{inspectionDateStr:JSON.parse(JSON.stringify(String(this.slistQuery.inspectionDateStr)))}
        );
        outerpage(parmas).then(res => {
          this.list = res.data.rows;
          this.total = res.data.total;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        })
      },
      getlossList() {
        this.listLoading = true;
        let parmas = Object.assign(
          JSON.parse(JSON.stringify(this.loslistQuery)),
          JSON.parse(JSON.stringify(this.losslistQuery)),{plannedCompletionTimeStr:JSON.parse(JSON.stringify(String(this.losslistQuery.plannedCompletionTimeStr)))}
        );
        Outerpageloss(parmas).then(res => {
          this.list = res.data.rows;
          this.lostotal = res.data.total;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        })
      },
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  .xf-query-input,
  .xf-query-select {
    width: 200px;
    margin: 0 10px;
  }
  // 精准查询
  .xf-double-form{
    .xf-dbform-item{
      display: flex;
      justify-content: space-between;
      .xf-dbform-item__sleft{
        .el-input{
          width: 320px;
        }
      }
      .xf-dbform-item__sright{
        .el-input{
          width: 320px;
        }
      }
    }
  }
  .inspection-export-xsl{
    margin-left: 10px;
    position: relative;
    top: 2px;
  }
</style>
